<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<!-- Line -->
<script id="VertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute vec2 a_Pin;
    uniform float u_PointSize;
    uniform mat4 u_ModelM4;
    varying vec2 v_Pin;
    void main(){
        gl_Position = u_ModelM4 * a_Position;
        gl_PointSize = u_PointSize;
        v_Pin = a_Pin;
    }
</script>
<script id="FragmentShader" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_Pin;
    void main(){
        //gl_FragColor = vec4(1,1,1,1);
        gl_FragColor = texture2D(u_Sampler, v_Pin);
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import Poly from '../js/Poly4.js';
    import { initShaders, CreateProgram } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Geo from '../js/Poly/Geo.js'
    import Mat from '../js/Poly/Mat.js'
    import Obj3D from '../js/Poly/Obj3D.js'
    import Scene from '../js/Poly/Scene.js'


    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 4;

    const gl = canvas.getContext("webgl");
    //开始背景遮挡
    // gl.enable(gl.DEPTH_TEST);
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    //#endregion




    //创建程序对象
    let program = CreateProgram(gl,
        document.querySelector('#VertexShader').innerText,
        document.querySelector('#FragmentShader').innerText);
    //启动程序对象

    const scene = new Scene({ gl: gl });

    let obj3d;

    let modelM4 = new Matrix4();
    modelM4.makeScale(0.5, 0.8, 0.5);
    modelM4.multiply(new Matrix4().makeScale(2, 2, 2));



    let img = new Image();
    img.src = './Image/Image05.png';

    img.onload = function () {

        obj3d = new Obj3D({
            mat: new Mat({
                program: program,
                data: {
                    'u_PointSize': { type: 'uniform1f', value: 10, },
                    'u_ModelM4': { type: 'uniformMatrix4fv', value: modelM4.elements },
                },
                mode: ['TRIANGLES', 'POINTS'],
                maps: {
                    'u_Sampler': { image: img, WRAP_W: gl.CLAMP_TO_EDGE, WRAP_H: gl.CLAMP_TO_EDGE, }
                }
            }),
            geo: new Geo({
                data: {
                    'a_Position': {
                        size: 2,
                        array: new Float32Array([
                            -0.2, 0.2,
                            -0.2, -0.2,
                            0.2, -0.2,
                            0.2, 0.2,
                        ]),
                    },
                    'a_Pin': {
                        size: 2,
                        array: new Float32Array([
                            0, 1,
                            0, 0,
                            1, 0,
                            1, 1
                        ]),
                    }
                },
                element: {
                    array: new Uint8Array([
                        0, 1, 2,
                        0, 2, 3
                    ]),
                }
            }),
        });

        scene.add(obj3d);
        scene.draw();

        ani(0);
    };

    function ani(time) {
        let set = (Math.sin(time / 200)) / 4;

        let m4 = new Matrix4();
        m4.multiplyMatrices(modelM4, new Matrix4().makeTranslation(0, set, 0));

        obj3d.setUniform('u_ModelM4', { value: m4.elements });

        scene.draw();

        requestAnimationFrame(ani);
    };

</script>

</html>